<%@ page language="java" pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
 <style>
.the-icons li {
float: left;
width: 25%;
line-height: 25px;
list-style: none;
cursor:pointer;
}
</style>
<div class="iconspage" style="height: 490px;overflow-x: auto;width: 820px;">
<ul class="the-icons clearfix iconspage" style="width:90%;padding-left: 50px;"  id="choosen_icons">
	 <li>
        <i class="icon_menu"></i>icon_menu
    </li>
    <li> 
        <i class="icon_doc"></i>icon_doc
    </li>
    <li>
        <i class="icon_list"></i>icon_list
    </li>
    <li>
        <i class="icon_sch"></i>icon_sch
    </li>
    <li>
        <i class="icon_tag"></i>icon_tag
    </li>
    <li>
        <i class="icon_user"></i>icon_user
    </li>
    <li>
        <i class="icon_setting"></i>icon_setting
    </li>
    <li>
        <i class="icon_book"></i>icon_book
    </li>
    <li>
        <i class="icon_mywork"></i>icon_mywork
    </li>
    <li>
        <i class="icon_like"></i>icon_like
    </li>
    <li>
        <i class="icon_exclamation"></i>icon_exclamation
    </li>
    <li>
        <i class="icon_star"></i>icon_star
    </li>
    <li>
        <i class="icon_layer"></i>icon_layer
    </li>
    <li>
        <i class="icon_tips"></i>icon_tips
    </li>
    <li>
        <i class="icon_question"></i>icon_question
    </li>
    <li>
        <i class="icon_sound"></i>icon_sound
    </li>
    <li>
        <i class="icon_date"></i>icon_date
    </li>
    <li>
        <i class="icon_document"></i>icon_document
    </li>
    <li>
        <i class="icon_random"></i>icon_random
    </li>
    <li>
        <i class="icon_refresh"></i>icon_refresh
    </li>
    <li>
        <i class="icon_hdd"></i>icon_hdd
    </li>
    <li>
        <i class="icon_docup"></i>icon_docup
    </li>
    <li>
        <i class="icon_docdown"></i>icon_docdown
    </li>
    <li>
        <i class="icon_home"></i>icon_home
    </li>
    <li>
        <i class="icon_arrow_down"></i>icon_arrow_down
    </li>
    <li>
        <i class="icon_arrow_up"></i>icon_arrow_up
    </li>
    <li>
        <i class="icon_graph_points"></i>icon_graph_points
    </li>
    <li>
        <i class="icon_lamp"></i>icon_lamp
    </li>
    <li>
        <i class="icon_coins"></i>icon_coins
    </li>
    <li>
        <i class="icon_box"></i>icon_box
    </li>
    <li>
        <i class="icon_sharethis"></i>icon_sharethis
    </li>
    <li>
        <i class="icon_organizing"></i>icon_organizing
    </li>
    <li>
        <i class="icon_station"></i>icon_station
    </li>
    <li>
        <i class="icon_user_add"></i>icon_user_add
    </li>
    <li>
        <i class="icon_grid"></i>icon_grid
    </li>
    <li>
        <i class="icon_adjust"></i>icon_adjust
    </li>
    <li>
        <i class="icon_magic_wand"></i>icon_magic_wand
    </li>
    <li>
        <i class="icon_lock_login"></i>icon_lock_login
    </li>
    <li>
        <i class="icon_map"></i>icon_map
    </li>
    <li>
        <i class="icon_hdd_net"></i>icon_hdd_net
    </li>
    <li>
        <i class="icon_three_points"></i>icon_three_points
    </li>
    <li>
        <i class="icon_settings_off"></i>icon_settings_off
    </li>
    <li>
        <i class="icon_speed"></i>icon_speed
    </li>
    <li>
        <i class="icon_diamonds"></i>icon_diamonds
    </li>
    <li>
        <i class="icon_connect_point"></i>icon_connect_point
    </li>
    <li>
        <i class="icon_shield"></i>icon_shield
    </li>
    <li>
        <i class="icon_locked"></i>icon_locked
    </li>
    <li>
        <i class="icon_eye_disabled"></i>icon_eye_disabled
    </li>
    <li>
        <i class="icon_key"></i>icon_key
    </li>
    <li>
        <i class="icon_no_entry"></i>icon_no_entry
    </li>
    <li>
        <i class="icon_pencil"></i>icon_pencil
    </li>
    <li>
        <i class="icon_links"></i>icon_links
    </li>
    <li>
        <i class="icon_bag"></i>icon_bag
    </li>
    <li>
        <i class="icon_sys"></i>icon_sys
    </li>
    <li>
        <i class="icon_viewport"></i>icon_viewport
    </li>
    <li>
        <i class="icon_compass"></i>icon_compass
    </li>
    <li>
        <i class="icon_paper_clip"></i>icon_paper_clip
    </li>
    <li>
        <i class="icon_document_full"></i>icon_document_full
    </li>
    <li>
        <i class="icon_pin_location"></i>icon_pin_location
    </li>
    <li>
        <i class="icon_cycling"></i>icon_cycling
    </li>
    <li>
        <i class="icon_default"></i>icon_default
    </li>
    <li>
        <i class="icon_grade"></i>icon_grade
    </li>
    <li>
        <i class="icon_closed"></i>icon_closed
    </li>
    <li>
        <i class="icon_minus"></i>icon_minus
    </li>
    <li>
        <i class="icon_add"></i>icon_add
    </li>
    <li>
        <i class="icon_mail"></i>icon_mail
    </li>
    <li>
        <i class="icon_recycle_left"></i>icon_recycle_left
    </li>
    <li>
        <i class="icon_recycle_right"></i>icon_recycle_right
    </li>
    <li>
        <i class="icon_comments_chat"></i>icon_comments_chat
    </li>
    <li>
        <i class="icon_copy_document"></i>icon_copy_document
    </li>
    <li>
        <i class="icon_bars"></i>icon_bars
    </li>
    <li>
        <i class="icon_sun"></i>icon_sun
    </li>
    <li>
        <i class="icon_windy"></i>icon_windy
    </li>
</ul>
</div>
<script>
	$("#choosen_icons li").on("click",function(){
		var iconclass=$(this).find("i").attr("class");
		$css.closeDialog();
		$("#add_menu #icon-i-setting").attr("class",iconclass);
		$("#add_menu #icon-span").html(iconclass);	
		$("#add_menu #icon").val(iconclass);	
		
	});
</script>